<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--组件其实就是用户自己扩充的 html 标签。在使用标签的时候，除了可以进行属性的传递，还可以在标签的内部存放文本信息-->
    <h1>原生的浏览器自带的标签内部是可以存放内容的</h1>

    <!--我们如果在vuejs里面给自定义的标签内部存放内容后，默认是不会做任何处理的，如果我们希望存放的内容可以显示出来，则我们需要在模板里面使用一个特殊的组件 slot 插槽进行扩充。-->
    <my-component1>如果在自定义的组件里面也写上内容，会怎么样呢？</my-component1>
    <hr>
    <my-component2></my-component2>
    <h3>{{ title }}</h3>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    Vue.component('my-component1', {
        created: function () {
            console.log('created 发送ajax请求，调用后台的接口获取数据');
        },
        updated: function () {
            console.log('updated 页面数据更新后执行');
        },
        data: function () {
            return {
                message: '我是全局组件的数据！',
            }
        },
        methods: {
            clickHandler: function (e) {
                console.log(e, e.target);
            }
        },
        template: '<div> <h1 style="color: #f00;">我是全局组件-{{ message }}</h1> <button @click="clickHandler">按钮</button> <slot></slot> </div>'
    });

    //我们可以把组件定义时候的第二个参数单独提取出来，形成一个组件对象
    var componentObj = {
        created: function () {
            console.log('created 发送ajax请求，调用后台的接口获取数据');
        },
        updated: function () {
            console.log('updated 页面数据更新后执行');
        },
        data: function () {
            return {
                message: '我是局部组件的数据！',
            }
        },
        methods: {
            clickHandler: function (e) {
                console.log(e, e.target);
            }
        },
        template: '<div> <h1 style="color: #f00;">我是局部组件-{{ message }}</h1> <button @click="clickHandler">按钮</button> </div>'
    };

    var vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 组件化'
        },
        /*在实例化 Vue 里面使用  components 定义的组件我们叫做局部组件*/
        components: {
            'my-component2': componentObj
        },
    })

</script>

</html>
